<template>
	<div class="background">
		<loading v-if="loading"></loading>
		<div v-if="!loading">
			<div class="top">
				<div class="left" onclick="window.history.go(-1)">
					<div class="back"></div>
				</div>
				<div class="title">{{MovieDirector.name_en}} {{MovieDirector.name}}</div>
				<div class="right"></div>
			</div>
			<div class="star_msg">
				<div class="image">
					<img :src="MovieDirector.avatars.medium">
				</div>
				<div class="star_msg_right">
					<h2>导演资料</h2>
					<p>{{MovieDirector.name_en}}</p>
					<p>{{MovieDirector.name}}</p>
					<p>{{MovieDirector.gender}}</p>
					<p>{{MovieDirector.born_place}}</p>
					<p>{{MovieDirector.birthday}}</p>
				</div>
			</div>
			<p class="summary">{{MovieDirector.summary}}</p>
			<div class="star-movie-wrap">
				<h3>他的代表作品</h3>
				<div class="star_movie" v-for="works in MovieDirector.works" v-on:click="gotoDetail(works.subject.id)">
					<div class="star_movie_img">
						<img :src="works.subject.images.small" class="f_l">
					</div>
					<div class="star_movie_msg f_l">
						<h2>{{works.subject.title}}</h2>
						<p class="roles" v-for="roles in works.roles">{{roles}}</p>
						<span>{{works.subject.year}}</span>
						<star class="star" :num="works.subject.rating.stars"></star>
						<p>
							<span>{{works.subject.rating.average}}分</span>
							<span>{{works.subject.collect_count}}人评价</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import star from './star'
	import loading from './loading'
	export default {
		data() {
			return {
				MovieDirector: {
					title: ''
				},
				loading: true
			}
		},
		components: {
	    star: star,
	    loading: loading
	  },
		mounted() {
			var id = this.$route.params.id
			this.$http.jsonp("https://api.douban.com/v2/movie/celebrity/" + id + '?apikey=0b2bdeda43b5688921839c8ecb20399b').then(function(response) {
		        this.MovieDirector = response.body
		        this.loading = false
		  })
		},
		methods: {
	   gotoDetail:function(id) {
	   	this.$router.push({name:'MovieDetail', params: {id:id}})
	   }
	  }		
	}
</script>

<style scoped>
	.f_r{
		float: right;
		margin-right: 20px;
	}
	.f_l{
		float: left;
	}
	.background {
		background-color: #e5e9f2;
		position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: scroll;
    font-family: FontAwesome,Helvetica,Arial,sans-serif;
	}
	.top{
		display: flex;
    height: 50px;
    width: 100%;
    background-color: #e54847;
    padding: 6px;
    box-sizing: border-box;
    color: #fff;
    font-size: 20px;
	}
	.top .left,.top .right{
		width: 50px;
		text-align: center;
		position: relative;
	}
	.top .back{
    position: absolute;
    top: 12px;
    left: 12px;
		height: 13px;
    width: 13px;
    border: 2px solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(45deg);
	}
	.top .title{
		flex: 1;
		text-align: center;
		vertical-align: middle;
		line-height: 40px;
		overflow: hidden;
		font-family: Microsoft Yahei;
	}
	.star_msg {
		display: flex;
    background-color: #b4b1b1;
    padding: 10px;
    color: #fff;
    overflow: hidden;
	}
	.star_msg img {
		flex: 1;
	}
	.star_msg_right {
		margin-left: 20px;
		overflow: hidden;
		overflow: scroll;
		width: 120px;
		flex: 1;
	}
	.star_msg h2{
		font-size: 20px;
		font-weight: bold;
		padding: 10px;
		font-family: Microsoft Yahei;
	}
	.star_msg p{
		line-height: 25px;
		font-size: 16px;

	}
	.star-movie-wrap {
		padding: 10px;
	}
	.summary{
		overflow: scroll;
		height: 100px;
		font-size: 14px;
		float: left;
		line-height: 20px;
		padding: 0 10px;
		text-indent:2em;
		margin-bottom: 20px;
		color: #fff;
		background-color: #b4b1b1;
	}
	.star-movie-wrap h3 {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.star_movie {
		overflow: hidden;
		padding: 10px 5px;
		border-bottom: 1px solid #ccc;
	}
	.star_movie_img {
		display: inline-block;
		float: left;
		width: 65px;
		overflow: hidden;
		overflow: scroll;
	}
	.star_movie_msg {
		margin-left: 20px;
		font-family: Microsoft Yahei;
	}
	.star_movie_msg h2{
		margin-bottom: 5px;
		font-size: 14px;
		overflow: hidden;
		width: 150px;
	}
	.roles {
		font-size: 12px;
		line-height: 16px;
	}
	.star_movie_msg span {
		margin-right: 10px;
		font-size: 12px;
	}
	.star {
		margin-top: 5px;
	}
</style>